/* Custom CSS for Component pages */

.component-preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 30px;
  grid-column-gap: 5px;
  margin-bottom: 60px;
  margin-top: 30px;
}

.component-preview--grid {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 400px) {
  .component-preview--grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) {
  .component-preview--grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.component-preview figure {
  margin: 0;
}

.component-preview figcaption,
.component-preview img {
  width: 100%;
}

@media (max-width: 486px) {
  .check {
    padding: 15px;
  }
}

.gradient {
  background: linear-gradient(120deg, var(--ifm-color-primary), #00a2ff);
}

.gradient.clip-text {
  font-weight: bolder;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.snackPlayer {
  overflow: hidden;
  background: #212121;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  height: 505px;
  width: 100%;
}

.card {
  border-radius: 8px;
  transition: 0.2s;
}

.card:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
}

.hero-wave path {
  fill: var(--ifm-hero-background-color);
}

.p--desc {
  opacity: 0.7;
  /* font-weight: 600; */
  /* font-size: small; */
  line-height: 24px;
}

.ball {
  position: absolute;
  width: 50px;
  height: 50px;
  animation: bounce 2s infinite alternate;
  -webkit-animation: bounce 2s infinite alternate;
}

.ball svg {
  font-size: 64px;
  fill-opacity: 0.1;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-8px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-8px);
  }
}
@media only screen and (max-width: 996px) {
  .hide-on-small {
    display: none;
  }
  .rne-hero-logo {
    /* display: none; */
    width: 10rem;
  }
  .hero__title {
    margin-top: 2rem;
    font-size: 2.5rem;
  }
  .hero .row {
    flex-direction: column;
    text-align: center;
  }
  .ball {
    display: none;
  }
}

.hero img.rne-hero-logo {
  box-shadow: 0px 0px 100px var(--ifm-color-primary);
}

/* background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover; */

img {
  pointer-events: none;
}
